<template>
	<view class="content">
		<radio-group class="lang" @change="radioChange">
			<label v-for="(item, index) in dataList" :key="index" class="lang-list">
				<view class="option">
					<text class="txt">{{ item.value }}</text>
				</view>
				<radio :value="item.value" :checked="item.checked"></radio>
			</label>
		</radio-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				dataList: [

					{
						value: 'English',
						checked: false,
						language: 'en'
					},
					{
						value: 'Español',
						checked: false,
						language: 'esp'
					},
					{
						value: 'Deutsch',
						checked: false,
						language: 'deu'
					},
					{
						value: 'français',
						checked: false,
						language: 'fra'
					},
					{
						value: 'Italiano',
						checked: false,
						language: 'ita'
					},

				]
			};
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onLoad() {

		},
		onShow() {
			let items = this.dataList;
			let ind = uni.getStorageSync('index'),
				lang = uni.getStorageSync('select');
			// 判断选择的语言
			if (lang) {
				items[ind].checked = true;
				this.$i18n.locale = lang;
			} else {
				this.$i18n.locale = 'en';
			}
			// 导航栏多语言
			uni.setNavigationBarTitle({
				title: this.$t("language")
			});
		},
		methods: {
			radioChange(e) {
				let _this = this;
				let items = _this.dataList;
				for (let i = 0; i < items.length; i++) {
					if (items[i].value == e.target.value) {
						items[i].checked = true;
						// console.log(e.target.value);
						// console.log(items[i].value);

						// 存储选择的下标
						uni.setStorageSync('index', i);
						// 存储选择的语言
						uni.setStorageSync('select', items[i].language);
						_this.$i18n.locale = items[i].language;
						// tabbar多语言

						break;
					}
				}
				setTimeout(function() {
					uni.navigateBack();
				}, 500);
			}
		}
	};
</script>

<style>
	.content {
		padding: 40upx 30upx;
	}

	.lang {
		display: flex;
		flex-direction: column;
	}

	.lang .lang-list {
		margin-bottom: 30rpx;
		padding: 10upx 30upx;
		display: flex;
		justify-content: space-between;
		border: 2rpx solid #007AFF;
		border-radius: 16rpx;
	}

	.lang .lang-list:last-child {
		margin-bottom: 0;
	}

	.lang .lang-list .option {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.lang .lang-list .option .img {
		margin-right: 30upx;
		width: 40upx;
		line-height: 1;
	}

	.lang .lang-list .option .img image {
		width: 100%;
	}

	.lang .lang-list .option .txt {
		font-size: 28upx;
	}

	.lang .lang-list radio {
		transform: scale(0.7);
	}
</style>
